<template>
  <div class="box">
    <!-- Logo -->
    <div class="top">
      <div class="logo">注册</div>
    </div>
    <!-- 登录框 -->

    <div class="loginView">
      <span class="register_span">请填写注册信息:</span>
      <van-form @submit="onSubmit">
        <van-field
          @blur.native.capture="checkName"
          style="font-size: 16px"
          v-model="username"
          name="用户名"
          label="用户名"
          placeholder="请填写用户名"
        />

        <van-field
          style="font-size: 16px"
          v-model="phone"
          name="手机号"
          label="手机号"
          placeholder="请填写手机号"
        />
        <div class="sendcode">
          <input
            style="font-size: 16px"
            placeholder="请填写验证码"
            v-model="code"
            autocomplete="off"
          />
          <button
            @click="countDown"
            :class="{ disabled: !canClick }"
            :disabled="flag"
          >
            {{ content }}
          </button>
        </div>
        <van-field
          @blur.native.capture="checkPwd"
          style="font-size: 16px"
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="请填写密码"
          autocomplete="off"
        />
        <van-field
          @blur.native.capture="checkRePwd"
          style="font-size: 16px"
          v-model="rePassword"
          type="password"
          name="确认密码"
          label="确认密码"
          placeholder="再次填写密码"
        />

        <div style="margin: 8vw">
          <van-button
            round
            block
            type="info"
            color="#1074ff"
            style="margin-top: 10px; font-size: 16px"
            >提交</van-button
          >
        </div>
      </van-form>
    </div>
    <!-- 登录-->
    <div class="divider">
      <van-divider :style="{ borderColor: '#1074ff', padding: '0 16px' }">
        <router-link to="/login" style="color: #646566">登录</router-link>
      </van-divider>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      password: "",
      phone: "",
      code: "",
      rePassword: "",
      content: "发送验证码",
      totalTime: 30,
      canClick: true, //添加canClick
      flag: false,
    };
  },
  methods: {
    checkName() {
      let reg = /^[\u4E00-\u9FA5]{2,4}$/;
      if (reg.test(this.username)) {
        return true;
      } else {
        this.$toast.fail("用户名格式不正确");
        return false;
      }
    },
    checkPwd() {
      let reg = /^\w{6,20}$/;
      if (reg.test(this.password)) {
        return true;
      } else {
        this.$toast.fail("密码格式不正确");
        return false;
      }
    },
    checkRePwd() {
      if (this.password == this.rePassword) {
        return true;
      } else {
        this.$toast.fail("两次填写的密码不一样");
        return false;
      }
    },

    onSubmit() {
      // console.log("submit", this.username);
      if (this.checkName() && this.checkPwd() && this.checkRePwd()) {
        // console.log("验证成功");
        let params = `username=${this.username}&password=${this.password}&phone=${this.phone}&code=${this.code}`;
        this.axios.post(`${this.$base}user/register`, params).then((res) => {
          // console.log(res);
          if (res.data.code == 200) {
            this.$toast("注册成功");
            // 成功后跳转到登录页面

            this.$router.push("/login");
          } else {
            this.$toast.fail("注册失败");
          }
        });
      }
    },
    countDown() {
      // console.log(111);
      if (!this.canClick) return; //改动的是这两行代码
      this.canClick = false;
      this.flag = true;
      this.content = this.totalTime + "s后发送";
      let clock = window.setInterval(() => {
        this.totalTime--;
        this.content = this.totalTime + "s后发送";
        if (this.totalTime < 0) {
          window.clearInterval(clock);
          this.content = "发送验证码";
          this.totalTime = 30;
          this.canClick = true; //这里重新开启
          this.flag = false;
        }
      }, 1000);

      // 发送axios请求
      this.axios
        .post(`${this.$base}user/getcode`, `phone=${this.phone}`)
        .then((res) => {
          // console.log(res)
        })
        .catch((err) => {
          console.error(err);
        });
    },
  },
};
</script>

<style lang="less" scoped>
div /deep/ .van-field__label {
  width: 4em !important;
}
.register_span {
  display: block;
  color: #646566;
  padding: 10px 16px;
}
.top {
  background: #1074ff linear-gradient(to top, rgba(0, 0, 0, 0), #5394ee);
  height: 40vh;
  display: flex;
  align-items: center;
}
.logo {
  font-size: 28px;
  line-height: 100px;
  text-align: center;
  width: 100px;
  height: 100px;
  background-color: white;
  color: #999999;
  margin: 0 auto;
  border-radius: 50%;
}
.box {
  width: 100vw;
  height: 100vh;
  background-color: #f8f8f8;
}
.loginView {
  background-color: white;
  padding-top: 10px;
  border-radius: 15px;
  width: 90vw;
  height: 40vh;
  margin: -5vh auto 0;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}
.divider {
  width: 100vw;
  position: absolute;
  bottom: 3vh;
}
.sendcode {
  float: right;
  text-align: right;
  margin: 8px auto;
  input {
    width: 30%;
    margin-left: 24vw;
    outline: none;
    border: 0;
    float: left;
    color: #000;
    opacity: 0.7;
  }
  /* WebKit browsers */
  input::placeholder {
    color: #666;
    font-size: 14px;
  }

  button {
    border: 0;
    outline: none;
    background-color: #1074ff;
    color: #fff;
    border-radius: 8px;
    margin-right: 7vw;
    // font-size: 4vw;
  }
}
.disabled {
  background-color: #ddd !important;
  border-color: #ddd !important;
  color: #1074ff !important ;
  cursor: not-allowed !important; // 鼠标变化
}
</style>